<template>
       <div class="home">
         <div class="left">
            <left-list></left-list>
        </div>
        <div class="right">
          <div>
            <div class="nav">
              
               <div class="clearfix"></div>  
            </div>
            <div class="list">  
              <my-title :title="title"></my-title>
              <my-list :list="list"></my-list>
            </div>
            
           </div> 
        </div>
       </div>
</template>
<script>
import myList from '../components/my-list'
import myTitle from '../components/my-title'
import leftList from '../components/left-list'
export default {
  name: "Home",
  data() {
    return {
     
      title:[
         "顺序号",
        "门类编码",
        "门类名称",
      ],
       list: [
      {"number":"2","code":"we","name":"文书档案"},
      {"number":"2","code":"we","name":"文书档案"},
      {"number":"2","code":"we","name":"文书档案"},
      {"number":"2","code":"we","name":"文书档案"},
      {"number":"2","code":"we","name":"文书档案"},
      {"number":"2","code":"we","name":"文书档案"},
      {"number":"2","code":"we","name":"文书档案"},
      {"number":"2","code":"we","name":"文书档案"},
      {"number":"2","code":"we","name":"文书档案"}
      ]
      
    };
  },
  methods:{
    parentAdd(){
      alert("是父组件的方法")
     
    }

  },
  components:{myList,myTitle,leftList}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '../assets/scss/utiles';
.home{
    width:100%;
    height:100%;
    @include flex;
    .left{
      width: 20%;
      height: 100%;
      overflow: hidden;
    }
    .right{
      width:80%;
      padding-left:10px;
      height:100%;
      overflow: hidden;
      .nav{
        width:100%;
        background:#eee;
      }

    }
  }

</style>

